<template>
  <div class="basic-info">
    <div style="position: relative;width:100%;height:50px;">
      <van-nav-bar
        fixed
        title="联系人信息"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div class="slider-box">
      <div class="slider">
        <div class="slider-bar"><div class="slider-button">50%</div></div>
      </div>
    </div>
    <div class="form" >
      <van-cell-group>
        <!-- :value="family" -->
        <van-cell title="家人" title-class="titleWidth"  is-link >
          <div style="display: flex;flex-direction: row;">
              <input type="text" style="text-align:center;border:none;width:120px;" :value="familyName">
              <div style="width:200px;"  @click="familySelect" >{{family}}</div>
          </div>
        </van-cell>
        <van-cell title="同事" data-id ="1" title-class="titleWidth" is-link  >
          <div style="display: flex;flex-direction: row;">
            <input type="text" style="text-align:center;border:none;width:120px;" :value="colleagueName">
            <div style="width:200px;" @click="colleagueSelect">{{colleague}}</div>
          </div>
        </van-cell>
        <van-cell title="朋友" is-link title-class="titleWidth"  >
          <div style="display: flex;flex-direction: row;">
            <input type="text" style="text-align:center;border:none;width:120px;" :value="friendName">
            <div style="width:200px;"  @click="friendSelect">{{friend}}</div>
          </div>
        </van-cell>
      </van-cell-group>
    </div>
    <van-button class="btn" round size="normal"
    :disabled="!((family!='请选择')&&(colleague!='请选择')&&(friend!='请选择'))" @click="btnNext">下一步</van-button>
    <!-- <div data-id="1" @click="text($event)">123123123123</div> -->
    <!-- 弹出列表 -->
    <van-popup v-model="PopupShow" class="linkman-model">
      <van-cell-group>
        <van-cell  @click="contactsSelect(index)" v-for="(item,index) in getPhoneList" :key="index">
          <div slot="title" class="text-left">{{item.name}}</div>
          <div>{{item.mobile}}</div>
        </van-cell>
      </van-cell-group>
    </van-popup>
    <!-- <input type="text" v-model="a"> -->
  </div>
</template>

<script>
import { Field, Cell, CellGroup, Button,Toast, Popup,Dialog,NavBar } from 'vant';

export default {
  components:{
    [Button.name]:Button,
    [Field.name]:Field,
    [Cell.name]:Cell,
    [CellGroup.name]:CellGroup,
    [Toast.name]:Toast,
    [Popup.name]:Popup,
    [Dialog.name]:Dialog,
    [NavBar.name]:NavBar,
  },
  data(){
    return{
      PopupShow:false,
      family:'请选择',
      familyName:'',
      familyPhone:'',
      colleague:'请选择',
      colleagueName:'',
      colleaguePhone:'',
      friend:'请选择',
      friendName:'',
      friendPhone:'',
      getPhoneList:'',//通讯录列表
      recordList:'',//通话记录
      active:0,
      info:'',
      latitude:'',//坐标
      longitude:'',
      phoneList:[]
      // a:''
    }
  },
  mounted(){
    _hmt.push(['_trackPageview', '/contact-info']);
    this.$util.goBack(Dialog);
    Toast.loading({duration:1000,mask: false,message: '加载中...'});
    let _this = this;
    // window.control.getLocation();
    this.$commin.getLocationWeb();
    window.getLocation=(latitude,longitude)=>{
      _this.latitude = latitude;
      _this.longitude = longitude;
    }

    // 获取本地数据
    this.$util.getUser().then(token=>{
       _this.token=token;
      console.log(token)
      if(token!='-1'){
        _this.myinfo(token)
      }
    })


  },
  methods:{
    onClickLeft(){
      this.$util.url('/HomeBefore','首页',Dialog);
    },
    // 家人选择
    familySelect(){
      if(!this.getPhoneList){
        this.getAddressBook(1)
      }else{
        this.active = 1;
        this.PopupShow=true;
      }
    },
    // 同事选择
    colleagueSelect(){
      if(!this.getPhoneList){
        this.getAddressBook(2)
      }else{
        this.active = 2;
        this.PopupShow=true;
      }
    },
    // 朋友选择
    friendSelect(){
      if(!this.getPhoneList){
        this.getAddressBook(3)
      }else{
        this.active = 3;
        this.PopupShow=true;
      }
    },
    contactsSelect(index){
      var reg = 11 && /^((11|12|13|15|16|17|18|19)[0-9]{1}\d{8})$/;
      let phone = (this.getPhoneList[index].mobile).replace(/\s+/g,"")
      let name = this.getPhoneList[index].name
      if(phone == undefined){
        Toast('不能选择空号码！')
        return;
      }
      if(phone.substring(0,3)=='147'||phone.substring(0,3)=='145'){
        Toast('不支持以147、145开头的联系人手机号，请重选')
        return false;
      }
      if (!reg.test(phone)) {
          Toast('需选择含有正确手机号码的联系人，请重选')
          return false;
      }
      if (this.info.phone == phone) {
          Toast('联系人号码不能与注册号码相同，请重选')
          return false;
      }

      // if (reg.test(phone)) {

      // }
      if(this.active ==1){
        this.familyName = name;
        this.familyPhone = phone;
        this.family = `${phone}`
      }else if(this.active ==2){
        this.colleagueName = name;
        this.colleaguePhone = phone;
        this.colleague = `${phone}`
      }else if(this.active ==3){
        this.friendName = name;
        this.friendPhone = phone;
        this.friend = `${phone}`
      }
      this.PopupShow=false;
    },
    getAddressBook(index){
      // 通讯录
      let getPhoneList = this.getPhoneList;
      if(!getPhoneList){
          // getPhoneList = window.control.getPhone()//获取通讯录
          // console.log(this.$commin)
          getPhoneList = this.$commin.getPhoneWeb();
          if(getPhoneList =="[]"){
            this.getPhoneList = '';
            Dialog.alert({
              title: '温馨提示',
              message: '请检查获取联系人权限是否开启，通讯录是否确实为空'
            }).then(() => {
              // on close
            });
            return false;
          }
          if(getPhoneList ==""){
            return false;
          }

      }
      // alert(getPhoneList)

      getPhoneList = JSON.parse(getPhoneList);
      this.active = index;
      this.PopupShow=true;
      this.getPhoneList = getPhoneList;

      // 通话记录
      // let recordList = window.control.getPhoneRecord()//通话记录
      // recordList = JSON.parse(recordList);
      // this.recordList = recordList;
    },
    btnNext(){
      let _this =this;
      let contacts = [{
        "phone": this.familyPhone,
        "realName": this.familyName,
        "type": 1,
      },{
        "phone": this.colleaguePhone,
        "realName": this.colleagueName,
        "type": 2,
      },{
        "phone": this.friendPhone,
        "realName": this.friendName,
        "type": 3,
      }];
      if((this.familyPhone==this.colleaguePhone)||(this.familyPhone==this.friendPhone)||(this.colleaguePhone==this.friendPhone)){
        Toast('联系人重复，请重选')
        return false;
      }

      setTimeout(()=>{
        // alert(_this.latitude);

        if(_this.latitude){
          // alert('进来了，不提交')
          // return false;
          Toast.loading({message: '加载中...'});
          // alert(JSON.stringify(_this.getPhoneList));
          _this.$api.post('/borrowBefore/v1/saveContacts',{
            "addressBooks": _this.getPhoneList,
            "bankrollCode": _this.$util.bankrollCode,
            "contacts":contacts
          },s=>{
            Toast.clear();
            console.log(s)

            if(s.module.step ==30){
              _this.$util.url('/identityInfo','身份信息')
            }else{
              // alert(s.module.step);
            }
          },f=>{
            if(f.resultCode=='10000'||f.resultCode=='10003'||f.resultCode=='10001'||f.resultCode=='10002'){
              _this.$util.url('/HomeBefore','首页')
            }else{
              Toast(f.errorMessage);
            }
          },{
            'Content-Type': 'application/json',
            'Accept': "*/*",
            'channelCode':_this.$util.channelCode,
            'version':_this.$util.version,
            'token':_this.token
          })
        }else{
          this.$commin.getLocationWeb();
          // window.control.getLocation();
        }
      },400)
      // 手机多号选会报错
      // let getPhoneList = [{"name":"PERMISSION"},{"mobile":"4008308300","name":"华为客服"},{"mobile":"176 0211 8868","name":"tanggege"}];
      // let contacts = [{"phone":"4008308300","realName":"华为客服","type":1},{"phone":"4008308300","realName":"华为客服","type":2},{"phone":"176 0211 8868","realName":"tanggege","type":3}]
      // mobile获取的是phone
      //   document.body.innerHTML=JSON.stringify(contacts);
      // document.body.style.fontSize="14px";
      // return ;

    },
    myinfo(token){
      let _this = this;
      this.$api.post('/user/v1/info',{},s=>{
        console.log(s);
        _this.info = s.module;
      },f=>{
        if(f.resultCode=='10000'||f.resultCode=='10003'||f.resultCode=='10001'||f.resultCode=='10002'){
          _this.$util.url('/HomeBefore','首页')
        }else{
          Toast(f.errorMessage);
        }
      },{
        'Accept': 'application/json',
        'channelCode':this.$util.channelCode,
        'version':this.$util.version,
        'token':token
      })
    }

  }
}
</script>

<style>
  /* .van-slider--disabled {
    opacity: 1;
  } */
  .titleWidth{
    width:80px;
    flex:none;
  }
</style>

<style scoped lang="scss">
  /***
  * 产品主题颜色需求
  * #FF8024 按钮 突出文字 ico
  * #FFD500 B辅助色
  * #FFEC9C c辅助色
  * #1D0F00 重要文字
  * #41424E 副标题段落
  * #797A79 次要文字
  * #A9AAA9 不可点击
  * #E6E6E6 分割线 描边
  * #F6F7F6 背景
  * #6699CC 链接
  */
.basic-info{
  width:100%;
  height:100%;
  background: #F6F7F6;
}
.slider-box{
  position: fixed;
  top:50px;
  z-index:100;
  width:100%;
  height:24px;
  background: #F6F7F6;
}
.slider{
  width:100%;
  height:6px;
  margin-top:9px;
  background: #E6E6E6;
  .slider-bar{
    position: relative;
    width:50%;
    height:6px;
    background: #FF8024;
  }
  .slider-button{
    position: absolute;
    top:-4px;
    right:-13px;
    width:30px;
    height:14px;
    background: #fff;
    border-radius: 2px;
    font-size:10px;
    box-shadow: 0 0 4px 0 rgba(0,0,0,0.10);
    color:#FF8024;
  }
}
.form{
  margin-top:24px;
  text-align: left;
}
.btn{
  width:90%;
  margin-top:40px;
  background: #FF8024;
  color:#fff;
}
.linkman-model{
  overflow: hidden;
  width:80%;
  height:70%;
  border-radius: 10px;
  overflow-y:scroll;
  -webkit-overflow-scrolling: touch;
}

</style>

